<template>
  <div class="dashboard">
    <!-- 1.顶部数据统计 -->
    <el-row :gutter="10">
      <template v-for="item in topPanelData" :key="item.title">
        <el-col :md="12" :lg="6" :xl="6">
          <statistical-panel :panelData="item" />
        </el-col>
      </template>
    </el-row>

    <!-- 2.中间布局 -->
    <el-row :gutter="10">
      <el-col :span="7">
        <red-card title="分类商品数量(饼图)">
          <pie-echart :pieData="categoryGoodsCount"></pie-echart>
        </red-card>
      </el-col>
      <el-col :span="10">
        <red-card title="不同城市商品销量">
          <map-echart :mapData="addressGoodsSale"></map-echart>
        </red-card>
      </el-col>
      <el-col :span="7">
        <red-card title="分类商品数量(玫瑰图)">
          <rose-echart :roseData="categoryGoodsCount"></rose-echart>
        </red-card>
      </el-col>
    </el-row>

    <!-- 3.底下布局 -->
    <el-row :gutter="10" class="row">
      <el-col :span="12">
        <red-card title="分类商品的销量">
          <line-echart v-bind="categoryGoodsSale"></line-echart>
        </red-card>
      </el-col>
      <el-col :span="12">
        <red-card title="分类商品的收藏">
          <bar-echart v-bind="categoryGoodsFavor"></bar-echart>
        </red-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from '@/store';

import StatisticalPanel from '@/components/statistical-panel';
import redCard from '@/base-ui/card';
import {
  pieEchart,
  roseEchart,
  lineEchart,
  barEchart,
  mapEchart
} from '@/components/page-charts';

export default defineComponent({
  name: 'dashboard',
  components: {
    StatisticalPanel,
    redCard,
    pieEchart,
    roseEchart,
    lineEchart,
    barEchart,
    mapEchart
  },
  setup() {
    const store = useStore();
    store.dispatch('dashBoardModule/getDashboardDataAction');

    // 2.获取顶部PanelData
    const topPanelData = computed(
      () => store.state.dashBoardModule.topPanelDatas
    );

    // 3.第二行的图
    // 饼图数据 玫瑰图数据
    const categoryGoodsCount = computed(() =>
      store.state.dashBoardModule.categoryGoodsCount.map((item: any) => {
        return { name: item.name, value: item.goodsCount };
      })
    );
    // 折线图数据
    const categoryGoodsSale = computed(() => {
      const xLabels: string[] = [];
      const values: any[] = [];

      const saleData = store.state.dashBoardModule.categoryGoodsSale;
      for (const item of saleData) {
        xLabels.push(item.name);
        values.push(item.goodsCount);
      }
      return { xLabels, values };
    });
    // 柱状图数据
    const categoryGoodsFavor = computed(() => {
      const xLabels: string[] = [];
      const values: any[] = [];

      const favorData = store.state.dashBoardModule.categoryGoodsFavor;
      for (const item of favorData) {
        xLabels.push(item.name);
        values.push(item.goodsFavor);
      }
      return { xLabels, values };
    });

    // 地图数据
    const addressGoodsSale = computed(() => {
      return store.state.dashBoardModule.addressGoodsSale.map((item: any) => {
        return { name: item.address, value: item.count };
      });
    });
    return {
      topPanelData,
      categoryGoodsCount,
      categoryGoodsSale,
      categoryGoodsFavor,
      addressGoodsSale
    };
  }
});
</script>

<style scoped lang="less">
.row {
  margin-top: 10px;
}
</style>
